// 为couponCom\redPacketCom
.couponMask{
  border-radius: 0;
  background-color: #f5f5f5;
  padding: 0;

}
.couponContainer2{
  overflow: hidden;
  .coupon-tab{
    display: flex;
    margin: 20rpx 0;
    padding: 10rpx 0;
    .coupon-tab-item{
      flex: 1;
      position: relative;
      text-align: center;
      font-size: 28rpx;
      line-height: 60rpx;
      color: #333;
      &.active {
        color: #000;
        font-weight: bold;
      }
      &::after {
        content: '';
        position: absolute;
        height: 6rpx;
        bottom: 0rpx;
        left: 50%;
        background-color: #000;
        width: 0;
        transition: width 0.3s;
        transform: translateX(-50%);
      }
      &.active::after {
        width: 40rpx;
      }
    }
  }
    .title{
      font-size: 34rpx;
      padding: 20rpx 40rpx;
      padding-bottom: 20rpx;
      border-top-left-radius: 20rpx;
      border-top-right-radius: 20rpx;
    }
    .title2{
      padding: 20rpx;
    }
    .coupnItemScroll{
      min-height: 800rpx;
      // padding-bottom: 120rpx;
      .scroll-Y {
        height: 700rpx;
        padding-bottom: 10rpx;
      }
      .fixed{
        display: flex;
        align-items: center;
        padding: 0 32rpx;
        box-sizing: border-box;
        justify-content: space-between;
        background-color: #fff;
        height: 135rpx;
        line-height: 80rpx;
        width: 100%;
        border: none;
        margin: 10rpx auto 0 auto;
        .descripe2{
          background-color: #000;
          font-size: 28rpx;
          color: #fff;
          width: 330rpx;
          height: 80rpx;
          text-align: center;
          border: 1px solid #000;
          &.unable{
            background-color: #fff;
            border: 1px solid #ccc;
            color: #999;
          }
        }
      }
    }
    .coupnItemBox{
      padding: 0 32rpx;
      .couponNone{
        margin-bottom: 20rpx;
      }
      .ruleBox{
        margin: 0 20rpx;
        transition: 200ms;
        padding: 20rpx;
        border-bottom-left-radius: 20rpx;
        border-bottom-right-radius: 20rpx;
      }
    }
    .couponItem{
      width: 100%;
      min-height: 189rpx;
      background-image: url('~@/static/images/cart/bg_coupon_normal.png');
      background-size: 100% 100%;
      position: relative;
      &.packetItem{
        background-image: url('~@/static/images/order/packet_bg.png');
        background-size: 100% 100%;
        background-color: #fff;
        border: none;
        .quota{
          .o-b{
            color: white;
          }
        }
        .descripe{
          padding-left: 40rpx;
        }
      }
      // background:rgba(255,244,248,1);
      // border:1px solid rgba(255, 117, 159, 1);
      // border-radius:10px;
      // padding: 20rpx 0px 30rpx 10rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 20rpx 0 0 0;
      .quota{
        color: $color-title;
        width: 30%;
        display: flex;
        white-space: nowrap;
        word-wrap: none;
        text-overflow: ellipsis;
        overflow: hidden;
        text-align: center;
        flex-direction: column;
        .o-b{font-size:60rpx; font-weight: normal; height: 45px; color: $color-title; display: inline-block}
        .o-small{font-size: 32rpx; display: inline-block}
        border-right: 1px dotted #efefef;
        // border-right: 1px dotted #333;
      }
      .descripe{
        flex: 1;
        padding: 5px 10px;
        align-items: left;
        display: flex;
        min-height: 100rpx;
        flex-direction: column;
        justify-content: center;
        .o-p{color: $color-title; margin-bottom: 5rpx; font-size: 32rpx;}
        .o-em{color: $color-tips; font-style: normal; font-size: 10px; margin-top: 5px; display: flex; align-items: center; }
        .o-span{font-size: 24rpx; color: $color-tips}
        image{
          width: 20rpx;
          height: 20rpx;
          margin-left: 10rpx;
        }
      }

      .coupnStateBox{
        position: absolute;
        right: 0;
        top: 0;
        height: 100%;
        display: flex;
        width: 100rpx;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-size: 100% 100%;
        &.checked{
          color: white;
        }
      }
      .signicon{
        width: 92rpx;
        position: absolute;
        z-index: 1;
        right: 0;
        top: 0;
        transition: 200ms;
      }
      .coupnState{
        position: relative;
        z-index: 2;
        width: 26rpx;
        font-size: 26rpx;
        text-align: center;
        color: white;
      }
    }
    .unuse{
      .quota{
        border-right: 1px dotted #efefef;
      }
      .o-em{
        color: $color-tips
      }
      .coupnStateBox{
        background-image: url('~@/static/images/cart/bg_select_none.png');
      }
    }
    .couponSelected{
      border: none;
      .coupnStateBox{
        background-image: url('~@/static/images/cart/bg_select_check.png');
      }
    }

  }